<template>
  <div class="settle-detail views-container">
    <div class="wlm-table">
      <div class="title">
        <img :src="info.logo" alt="这是图片" width="70px" height="70px" style="vertical:middle;margin-right:10px;">
        {{info.name}}
      </div>

      <div class="wlm-table-header">

        <el-form :model="tableFormatData.settleDetailList.files" size="small" label-width="100px" class="retail-form" label-position="right">
          <!-- <el-form-item label="供应商名称：" class="search"> -->
          <!-- <el-select v-model="tableFormatData.settleDetailList.files.type" style="width:160px;" placeholder="请选择结算类型">
              <el-option label="全部" value="0"></el-option>
              <el-option label="已结算" value="1"></el-option>
              <el-option label="未结算" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：" class="search">
            <el-date-picker v-model="tableFormatData.settleDetailList.files.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:300px;"></el-date-picker>
          </el-form-item>
          <el-form-item label="" class="filter-btns">
            <el-button type="primary" @click="filesSerch">确认结算</el-button>
          </el-form-item> -->
          <el-button type="primary" @click="confirmSettle" :disabled="!isAllSettle">{{isAllSettle?"确认结算":"已全部结算"}}</el-button>
            <div style="font-size:14px;color:#666;margin-top:10px;">勾选全部时，默认结算未结算的商品</div>

          <!-- <el-button type="primary" @click="changeTableItem({ids:tableFormatData.settleDetailList.files.ids},tableFormatData.settleDetailList.change.settle)">确认结算</el-button> -->
        </el-form>
      </div>
      <div class="wlm-table-content">
        <el-table :ref="tableFormatData.settleDetailList.key" :data="tableFormatData.settleDetailList.tableData" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column type="selection" width="55" :selectable='selectable'>
          </el-table-column>
          <el-table-column label="商品">
            <template slot-scope="scope">
              <div style="display:flex;justify-conten:center;align-items:center;">
                <img height="50" width="50" :src="scope.row.goods_img" alt="这是图片" style="border-radius:50%;marign-right:10px;">
                <span>{{scope.row.goods_name}}</span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="goodsNumber" label="商品数量"></el-table-column> -->
          <el-table-column prop="total_num" label="商品数量"></el-table-column>
          <el-table-column prop="order_no" label="订单编号" width="200px"></el-table-column>
          <el-table-column prop="supplier_rate" label="供应商结算率（%)"></el-table-column>
          <el-table-column prop="p_money" label="平台所得">
          </el-table-column>
          <el-table-column prop="pay_price" label="	实际支付金额">
          </el-table-column>
          <el-table-column prop="is_bill" label="状态">
            <template slot-scope="scope">
              {{scope.row.is_bill==1?'已结算':'未结算'}}
            </template>
          </el-table-column>
          <el-table-column prop="str" label="佣金设置">
          </el-table-column>
          <el-table-column prop="reg_money" label="团长佣金">
          </el-table-column>
          <el-table-column prop="supplier_money" label="供应商所得">
          </el-table-column>
          <el-table-column prop="create_time" label="入账时间" width="200px"> </el-table-column>
        </el-table>

        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.settleDetailList.pagination.page" :page-sizes="tableFormatData.settleDetailList.pagination.pagesizes" :page-size.sync="tableFormatData.settleDetailList.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.settleDetailList.pagination.total : 0">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { regBillDetail, confirmBill } from '@/api/commityBuy'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'SettleDetail',
  components: {

  },
  directives: {
    waves
  },
  computed: {
    isAllSettle() {
      const tableData = this.tableFormatData.settleDetailList.tableData
      let flag = false
      tableData.forEach(item => {
        if (item.is_bill == 2) {
          flag = true
        }
      })
      return flag
    }
  },
  data() {
    return {
      info: {
        name: this.$route.query.name,
        logo: this.$route.query.path
      },
      tableFormatData: {
        current: 'settleDetailList',
        settleDetailList: {
          key: 'settleDetailList',
          api: {
            getList: regBillDetail
          },
          tableData: [

          ],
          files: {
            type: '',
            time: '',
            ids: [],
            checkall: '0',
            redirect: 'order_id'
          },
          change: {
            settle: {
              name: '结算',
              key: 'settle',
              api: confirmBill
            }
          },
          redirect: 's_id',
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    selectable(row, index) {
      let falg = true
      row.is_bill == 1 ? falg = false : ''
      return falg
    },
    confirmSettle() {
      const array = []
      this.tableFormatData.settleDetailList.files.ids.map((item) => {
        array.push(item.order_id)
      })
      if (array.length) {
        confirmBill({ ids: array }).then(res => {
          const { code, msg } = res.data
          // this.$message.success(msg)
          this.$message.success(msg)
          if (code == 1) {
            this.$router.push({ path: '/application/settleManagement' })
          }
        })
      } else {
        this.$message.warning('请选择结算商品')
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.settle-detail {
  .title {
    font-size: 16px;
    margin: 20px auto;
    overflow: hidden;
    box-sizing: border-box;
    img {
      border-radius: 50%;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
}
</style>

